<template>
  <div class="container">
    <!-- 轮播图区域 -->
    <swiper :swiperList="swiperList" :indicatorColor="'#00FFFF'"></swiper>
    <!-- 商品详情 -->
    <div class="goodsinfo">
      <div class="goods-title">{{ goodsinfo.title }}</div>
      <div class="price-info">
        市场价:
        <span>
          ￥<s>{{ goodsinfo.market_price }}</s>
        </span>
        销售价:<b>￥{{ goodsinfo.sell_price }}</b>
      </div>
      <div class="count">
        <span>购买数量</span>
        <van-stepper v-model="count" min="1" integer step="1" />
      </div>
      <div class="btns">
        <van-button type="info">立即购买</van-button>
        <van-button type="danger" @click="addCar">加入购物车</van-button>
      </div>
    </div>
    <!-- 商品参数 -->
    <div class="goodsparams">
      <div class="params-title">商品参数</div>
      <div class="params-body">
        <p>商品货号：{{ goodsinfo.goods_no }}</p>
        <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
        <p>上架时间：{{ goodsinfo.add_time | formatDate }}</p>
      </div>
      <div class="btns">
        <van-button plain type="info" size="large" @click="goDesc"
          >图文介绍</van-button
        >
        <van-button
          plain
          type="danger"
          size="large"
          @click="$router.push('/goodscomments/' + goodsId)"
          >商品评论</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// 导入轮播图子组件
import swiper from '../subcomponents/Swiper.vue'

export default {
  data() {
    return {
      // 轮播图列表
      swiperList: [],
      // 商品详情
      goodsinfo: {},
      // 已选商品数量
      count: 1,
      // 当前商品 id
      goodsId: null
    }
  },
  created() {
    this.goodsId = this.$route.params.id
    this.getGoodsDetail()
    this.getGoodsInfo()
  },
  components: {
    swiper
  },
  methods: {
    // 获取商品轮播图
    async getGoodsDetail() {
      const { data: res } = await this.$http.get(
        '/api/getthumimages/' + this.goodsId
      )
      if (res.status !== 0) {
        return this.$toast('服务器异常!')
      }
      this.swiperList = res.message
    },
    // 获取商品详情
    async getGoodsInfo() {
      const { data: res } = await this.$http.get(
        '/api/goods/getinfo/' + this.goodsId
      )
      if (res.status !== 0) {
        return this.$toast('服务器异常!')
      }
      this.goodsinfo = res.message[0]
    },
    // 跳转商品图文介绍页
    goDesc() {
      this.$router.push('/goods/goodsdesc/' + this.goodsId)
    },
    // 加入购物车
    addCar() {
      const goodInfo = {
        id: this.goodsId,
        count: this.count
      }
      this.$store.dispatch('addToCar', goodInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 10px;
  .goodsinfo {
    margin-top: 10px;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
    .goods-title {
      border-bottom: 1px solid #ccc;
    }
    .price-info {
      font-size: 14px;
      margin-top: 15px;
      margin-bottom: 10px;
      margin-left: 10px;
      color: #8f8f94;
      s {
        text-decoration: line-through;
        margin-right: 10px;
      }
      b {
        font-size: 16px;
        color: red;
        font-style: normal;
      }
    }
    .count {
      padding: 10px;
      span {
        font-size: 14px;
        color: #8f8f94;
      }
      .van-stepper {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
      }
    }
    .btns {
      .van-button {
        margin: 3px 3px;
        height: 33px;
        line-height: 33px;
      }
    }
  }
  .goodsparams {
    margin-top: 10px;
    padding: 15px;
    border-radius: 3px;
    border: 1px solid #ccc;
    .params-title {
      font-size: 17px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }
    .params-body {
      border-bottom: 1px solid #ccc;
      padding: 15px;
      p {
        font-size: 14px;
        margin: 10px 0;
        color: #8f8f94;
      }
    }
    .btns {
      margin-top: 10px;
      .van-button {
        height: 39px;
        line-height: 39px;
        border-radius: 5px;
        margin: 5px 0;
      }
    }
  }
}
</style>
